<template>
    <div id="decorateBox">
        <div id="mainBox" :style="{ backgroundColor: backgroundColor }">
            <div id="navBox">
                <ul>
                    <li id="signLink"  @click="handleSwitch">登录</li>
                    <li id="registerLink"  @click="handleSwitch">注册</li>
                </ul>
            </div>
            <div id="loginBox" v-show="showLoginBox">
                <form @submit.prevent="handleLogin" id="loginForm">
                    <div class="formItem">
                        <label>用户名:</label>
                        <input v-model="login_user_phone" :style="{ backgroundColor: backgroundColor }" type="text" id="login_user_phone">
                    </div>
                    <div class="formItem">
                        <label>密码:</label>
                        <input v-model="login_password" :style="{ backgroundColor: backgroundColor }" type="password" id="login_password">
                    </div>
                    <div class="formItem">
                        <button type="submit">登录</button>
                    </div>
                </form>
            </div>
            <div id="registerBox" v-show="showRegisterBox">
                <form @submit.prevent="handleRegister" id="registerForm">
                    <div class="formItem">
                        <label>用户名:</label>
                        <input v-model="register_user_phone" type="text" :style="{ backgroundColor: backgroundColor }" id="register_user_phone">
                    </div>
                    <div class="formItem">
                        <!-- 需弄一个切换明文密文的按钮 -->
                        <label>密码:</label>
                        <input v-model="register_user_password" type="text" :style="{ backgroundColor: backgroundColor }" id="register_password">
                    </div>
                    <div class="formItem">
                        <label>确认密码:</label>
                        <input v-model="register_user_confirm_password" type="password" :style="{ backgroundColor: backgroundColor }" id="register_cofirm_password">
                    </div>
                    <div class="formItem">
                        <button type="submit">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            showLoginBox: true,
            showRegisterBox: false,
            backgroundColor: 'papayawhip'
        };
    },
    methods: {
        async handleLogin() {
            const user_phone = this.login_user_phone;
            const password = this.login_password;
            try {
                const response = await axios.post('http://localhost:8080/login', {
                    phone: user_phone,
                    password: password
                });
                if (response.data.success === true) {
                    localStorage.setItem('token', response.data.data.token);
                    localStorage.setItem('user_name', response.data.data.user_name);
                    alert('登录成功');
                    this.$router.push('/');
                }
            } catch (error) {
                console.error(error);
                alert('登录失败外部');
            }
        },
        async handleRegister() {
            const register_phone = this.register_user_phone;
            const register_password = this.register_user_password;
            const register_confirm_password = this.register_user_confirm_password;
            if(register_password !== register_confirm_password) {
                alert('两次密码不一致');
                return;
            }
            try {
                const response = await axios.post('http://localhost:8080/register', {
                    phone: register_phone,
                    password: register_password
                });
                if (response.data.success === true) {
                    alert('注册成功');
                    this.handleSwitch();//切换到登录界面
                }else{
                    alert(response.data.errorMsg+"内");//这里的失败可能是复用手机号的问题
                }
            } catch (error) {
                console.error(error);
                alert(response.data.errorMsg+"外");//这里的失败可能是网络连接的问题
            }
        },
        handleSwitch() {
            if(this.showLoginBox == true) {
                this.showLoginBox = false;
                this.showRegisterBox = true;
                this.backgroundColor = 'gainsboro';
            } else {
                this.showLoginBox = true;
                this.showRegisterBox = false;
                this.backgroundColor = 'papayawhip';
            }
        }
    }
}
</script>

<style scoped>
#decorateBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mainBox {
    border: 5px solid black;
}


#loginForm {
    margin: 0;
}

#loginBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

#registerForm {
    margin: 0;
}

#registerBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul {
    margin: 0;
    display: flex;
    padding: 0;
}

li {
    display: inline;
    text-align: center;
    list-style-type: none;
    margin: 0;
    width: 90px;
}

#signLink {
    background-color: papayawhip;
}

#registerLink {
    background-color: gainsboro;
}

.formItem {
    margin: 5px 0;
}

label {
    display: block;
    width: 80px;
}
</style>